<template>
	<view v-if="activityInfo" class="page-brand pb60" :style="{backgroundColor: activityInfo.color.bjs}">
		<!-- banner -->
		<view class="banner">
			<image class="image" mode="widthFix" :src="imgPath + activityInfo.image.banner"></image>
			<view class="time">活动时间：{{activityInfo.begintime}}-{{activityInfo.endtime}}</view>
		</view>
		<!-- 已点亮酒店 -->
		<view class="box-shadow brand" style="margin-top: -160rpx;">
			<view class="title flex-row-center">
				<view class="inner" :style="{backgroundColor: activityInfo.color.bt}">已点亮<text class="yellow">{{info.yes}}</text>种品牌<text class="line">|</text>累计<text class="yellow">{{info.night}}</text>间夜</view>
			</view>
			<view class="list flex-row-between flex-wrap">
				<block v-for="(item, index) in dataList" :key="index">
					<view class="item flex-column-center" :class="{'shadow': item.flag == 0}" @click="goNext('/pages/hotel/hotelDetail?id=' + item.id)">
						<view v-if="index == 0 && item.flag == 1" class="tag">最新</view>
						<view class="logo bg-cover" :style="{backgroundImage: 'url(' + imgPath + item.logo + ')'}"></view>
						<view class="font13 name">{{item.name}}</view>
						<view>
							<text class="font13 font-666666">累计：</text>
							<text class="font16 font-assist font-b">{{item.light}}</text>
							<text class="font13 font-assist">间夜</text>
						</view>
						<view v-if="item.flag == 0" class="mask flex-column-center">
							<image class="star" src="https://static.newbeaconhotels.com/app/hotel/activity/brand-star.png"></image>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 奖品列表 + 活动说明 -->
		<view class="box-shadow">
			<view class="title flex-row-center">
				<view class="inner" :style="{backgroundColor: activityInfo.color.bt}">任务完成即可获得奖品</view>
			</view>
			<!-- 奖品列表 -->
			<view class="prize">
				<block v-for="(item, index) in taskList" :key="index">
					<view class="item flex-row-between">
						<image v-if="item.flag == 1" class="image" src="https://static.newbeaconhotels.com/app/hotel/activity/red1.png"></image>
						<image v-if="item.flag == 0" class="image" src="https://static.newbeaconhotels.com/app/hotel/activity/red1-2.png"></image>
						<view class="name font14">{{item.name}}</view>
						<view class="need font13">点亮<text class="font-assist">{{item.value}}</text>个</view>
						<view v-if="item.flag == 0" class="btn grey">任务未完成</view>
						<view v-if="item.flag == 1" class="btn" @click="takePrize(item.id)">立即领取</view>
						<view v-if="item.flag == 2" class="btn grey" >已领取</view>
					</view>
				</block>
			</view>
			<!-- 活动说明 -->
			<view class="rule">
				<view class="common-title flex-row-center font14">活动说明</view>
				<view class="content">
					<rich-text :nodes="activityInfo.info"></rich-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgPath: this.$Config.http_static, // 图片头
				activityInfo: null, // 活动详情
				info: {}, // 足迹详情
				dataList: [], // 列表
				taskList: [], // 任务列表
			}
		},
		onLoad: function(options){
			// 活动详情
			this.$Http({
				url: 'activityInfo',
				data: { id: options.id },
			}).then(res => {
				if (res.code == 1) {
					res.data.begintime = this.$base.formatTime(new Date(res.data.begintime), "yyyy/MM/dd")
					res.data.endtime = this.$base.formatTime(new Date(res.data.endtime), "yyyy/MM/dd")
					this.activityInfo = res.data
				}
			});
			
			// 打卡足迹
			this.$Http({
				url: 'brandPrint',
				token: true,
				load: true,
				data: { id: options.id },
			}).then(res => {
				if (res.code == 1) {
					this.info = res.data.info
					this.dataList = res.data.data
				}
			});
			
			// 任务列表
			this.$Http({
				url: 'activityTask',
				token: true,
				data: {
					activity_id: options.id
				}
			}).then(res => {
				this.taskList = res.data.data
			});
		},
		methods: {
			// 立即领取
			takePrize (id) {
				this.$Http({
					url: 'takePrize',
					token: true,
					data: {
						id: id
					}
				}).then(res => {
					uni.navigateTo({ url: '/pages/activity/common/prizeList' })
				});
			},
			// 路由跳转: tag默认false,tag=true跳到tabBar页面
			goNext(url, tag) {
				if (tag) {
					uni.switchTab({ url: url });
				} else {
					uni.navigateTo({ url: url });
				}
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
